import React, { useEffect, useState } from 'react'
import { Input, PageContainer, View, Text } from "@tarojs/components"
import { ShowLoading, ShowToast, VibrateShort } from '@/utils'
import Avatar from "@/components/avatar";
import { accountMemberType } from '@/types';
import http from '@/request';
import "./index.scss"

let inited = false
const MemberEditer: React.FC<{
    show: boolean,
    accountId?: number,
    memberData?: accountMemberType,
    onChange: (member: accountMemberType) => void,
    onClose: () => void
}> = ({ show, onClose, memberData, accountId, onChange }) => {
    const [isVisible, setIsVisible] = useState<boolean>(false)
    const [member, setMember] = useState<accountMemberType>({ initAmount: 0 })
    useEffect(() => {
        if (show) {
            setIsVisible(true)
        } else {
            setTimeout(() => {
                setIsVisible(false)
            }, 500)
        }
        if (show) {
            inited = true
        }
        if (inited) {
            VibrateShort()
        }
    }, [show])

    useEffect(() => {
        setMember({ ...member, ...(memberData || {}) })
    }, [memberData])

    const formChange = (val, key) => {
        if (key === 'initAmount') {
            setMember({
                ...member,
                [key]: isNaN(val) ? '' : Number(val)
            })
        } else {
            setMember({
                ...member,
                [key]: val
            })
        }
    }

    const saveMember = () => {
        const { avatarUrl, userName, initAmount } = member
        if (!avatarUrl || !userName) {
            ShowToast('成员名字和成员头像不能为空')
            return
        }
        if (!initAmount && initAmount !== 0) {
            ShowToast('成员初始资金不能为空')
            return
        }
        ShowLoading()
        http.post(`/account-user/addOrUpdateMember/${accountId}`, member).then(_ => {
            onClose()
            onChange && onChange(member)
        }).catch(err => {
            ShowToast(err.msg || '创建成员失败')
        })
    }

    return (
        <View className='member-editer'>
            {
                isVisible ? <PageContainer show={show} onLeave={onClose} overlay round zIndex={9999}>
                    <View className="user-form">
                        <View className="dialog-title font-size32">{member.id ? '编辑' : '创建'}成员</View>
                        <View className="user-form-item flex-row flex-item">
                            <View className="user-form-label">成员头像</View>
                            <Avatar
                                editMode={!member.hasBindWechat}
                                size="90rpx"
                                url={member?.avatarUrl}
                                onChange={(val) => formChange(val, 'avatarUrl')}
                                className="flex-column flex-item" />
                        </View>
                        <View className="bottom-line"></View>
                        <View className="user-form-item flex-row flex-item">
                            <View className="user-form-label">成员名字</View>
                            {
                                member.hasBindWechat ?
                                    <View>{member?.userName}</View> :
                                    <Input className="user-form-value flex1"
                                        placeholder-class="placeholder-style"
                                        placeholder="请输入名字"
                                        value={member?.userName}
                                        onInput={(e) => formChange(e.detail.value, 'userName')}></Input>
                            }
                        </View>
                        <View className="bottom-line"></View>
                        <View className="user-form-item flex-row flex-item">
                            <View className="user-form-label">初始资金</View>
                            <Input className="user-form-value flex1"
                                placeholder-class="placeholder-style"
                                placeholder="请输入初始资金"
                                type='digit'
                                value={(member?.initAmount) + ''}
                                onInput={(e) => formChange(e.detail.value, 'initAmount')}></Input>
                        </View>
                    </View>
                    <View className="page-bottom flex-column flex-item card-background">
                        <View className="half-line"></View>
                        <View className="comment-input-container flex-row flex-item">
                            <View className="flex1"></View>
                            <View onClick={onClose} className="btn font-size24 preview-btn flex-row flex-center">
                                <Text className="data-val font-size24">取消</Text>
                            </View>
                            <View className="flex1"></View>
                            <View onClick={saveMember} className="btn font-size24 save-btn flex-row flex-center">
                                <Text className="data-val font-size24">保存数据</Text>
                            </View>
                            <View className="flex1"></View>
                        </View>
                    </View>
                </PageContainer> : null
            }
        </View>
    )
}

export default MemberEditer